<template>
	<view>
		<view class="edgeInsetTop"></view>
		<form @submit="formSubmit">
			<view class="bg-white action flex justify-center align-center padding-top padding-bottom-sm" @tap="Avatar">
				<view class="cu-avatar round lg" :style="{backgroundImage: 'url('+ $wanlshop.oss(user.avatar, 52, 52, 2, 'avatar') +')'}" ></view>
			</view>
			<view class="cu-form-group">
				<view class="title">昵称</view>
				<input placeholder="请输入昵称" name="nickname" :value="user.nickname"></input>
				<text class="wlIcon-fanhui2"></text>
			</view>
			<view class="cu-form-group">
				<view class="title">用户名</view>
				<input placeholder="请输入用户名" disabled name="username" :value="user.username"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<view style="display: none;">
					<input name="gender" :value="genderdata" disabled></input> 
				</view>
				<switch class='switch-sex' @change="Gender" :class="gender?'checked':''" :checked="gender?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="user.birthday || '1992-08-23'" @change="DateChange">
					<view style="display: none;">
						<input name="birthday" :value="user.birthday" disabled></input>
					</view>
					<view class="picker">
						{{user.birthday || '1992-08-23'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group flex justify-start align-start">
				<view class="title" style="margin-top: 52rpx;">个性签名</view>
				<!-- <input placeholder="请输入个性签名" name="bio" :value="user.bio"></input> -->
				<textarea style="background-color: #F4F4F4;padding: 20rpx;height: 264rpx;" placeholder="请输入您的个性签名，让更多人了解你吧" name="bio" :value="user.bio" cols="30" rows="30"></textarea>
			</view>
			<view class="padding-bj flex flex-direction">
				<button form-type="submit" class="cu-btn bg-green margin-tb lg">保存</button>
				<button class="cu-btn line-green lg" @tap="logout()">退出登录</button>
			</view>
		</form>

	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				gender: true,
				genderdata: 0 
			}
		},
		onLoad() {
			//中央总线重新赋值Data
			this.gender = this.$store.state.user.gender == 0 ? true : false;
			this.genderdata = this.$store.state.user.gender;
		},
		methods: {
			logout() {
				let that = this;
				this.$store.dispatch('chat/logout');
				// #ifdef APP-PLUS
				if (!this.ws.socketOpen || parseInt(that.ws.initializeData.config.uni_push_switch) == 0) {
					that.ws.logout()
				} else {
					that.ws.pushCid('logout')
				}
				// #endif
				
				// #ifndef APP-PLUS
				that.ws.logout()
				// #endif
				this.$wanlshop.msg('退出成功');
				this.$wanlshop.back(1);
			},
			DateChange(e) {
				this.$store.state.user.birthday = e.detail.value
			},
			Gender(e) {
				if(e.detail.value == true){
					this.gender = true;
					this.genderdata = 0;
				}else{
					this.gender = false;
					this.genderdata = 1;
				}
			},
			Avatar(){
				this.$wanlshop.to('/pages/user/portrait/portrait');
			},
			formSubmit: function(e) {
				//定义表单规则
				
				let rule = [
					{name: 'username', checkType: 'string', checkRule: '3,32', errorMsg: '用户名，至少3-32字符'},
					{name: 'nickname', checkType: 'string', checkRule: '3,32', errorMsg: '昵称，至少3-32字符'}
				];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				// ..检查是否注册-没注册跳转注册
				if (checkRes) {
					uni.request({
						url: '/wanlshop/user/profile', 
						method: 'POST',
						data: formData,
						success: res => {
							// 保存用户信息
							this.$store.commit('user/setUserInfo', formData);
							// 提示
							this.$wanlshop.msg('保存成功');
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
		}
	}
</script>

<style lang="less">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.cu-form-group {
		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #333333;
		}
		input {
			padding-right: 10rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.wlIcon-fanhui2 {
			font-size: 24rpx;
			color: #666666;
			font-weight: bold;
		}
		uni-picker {
			&::after {
				font-size: 24rpx;
				color: #666666;
				font-weight: bold;
			}
		}
	}
	.cu-avatar {
		width: 160rpx;
		height: 160rpx;
	}
	.switch-sex {
		transform:scale(0.7);
	}
</style>
